<template>
  <div class="plan">
    <el-card class="box-card">
      <h1>进度报表</h1>
      <div class="fl workshop" ref="workshop"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 车间进度
      transit: {
        title: {
          text: "车间生产进度",
          subtext: "数据来源于工厂每日上报",
          left: "left",
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["生产数量", "成品", "产品不良数", "计划数量", "未完成"],
        },
        grid: {
          left: "5%",
          right: "50%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["第一车间", "第二车间", "第三车间", "机器人车间", "冲压车间"],
        },
        series: [
          {
            name: "生产数量",
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            data: [7000, 6000, 4000, 5000, 7000],
          },

          {
            name: "成品",
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            data: [6000, 5000, 3000, 4000, 6000],
          },

          {
            name: "不良数",
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            data: [300, 400, 600, 300, 200],
          },
          {
            name: "计划数量",
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            data: [6555, 8000, 9000, 8000, 9000],
          },
          // 生产数
          {
            name: "生产进度",
            type: "pie",
            radius: "25%",
            center: ["70%", "30%"],
            data: [
              { value: 335, name: "生产数量" },
              { value: 310, name: "成品" },
              { value: 234, name: "产品不良数" },
              { value: 34, name: "未完成" },
            ],
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },

          {
            name: "漏斗图",
            type: "funnel",
            left: "55%",
            top: "50%",
            //x2: 80,
            bottom: 60,
            width: "38%",
            height: "40%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "ascending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 335, name: "生产数量" },
              { value: 310, name: "成品" },
              { value: 234, name: "产品不良数" },
              { value: 34, name: "未完成" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.ProgressStatus();
  },
  methods: {
    ProgressStatus() {
      this.axios({
        method: "post",
        url: "/month_out",
        data: {
          year: 2020,
          month: 10,
        },
      })
        .then((res) => {
          console.log("获取数据==>", res);
        })
        .catch((err) => {});

      //   车间进度
      let workshop = this.$echarts.init(this.$refs.workshop);
      // console.log(workshop);
      workshop.setOption(this.transit);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/plan.less";
</style>
